<template>
    <view class="map-class">
		<view  class="left-icon">
			<navSearchBar  :zIndex="titleZindex" background=""></navSearchBar>
		</view>
		<view class="map-field">
			<map 
			id="map"
			:style="{ height:mapHeight}" 
			style="width: 100%"
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="marker"
			
			
			:scale="scale"
			>
			</map>
			<!-- <view @click="getCurrentLocation" class="layer-control">
				<image src="@/static/wx.png" ></image>
			</view> -->
		</view>
		
		<view class="footer_field">
			<view class="name_lable-field">
				<text class="name_label text-label">{{placeName}}</text>
				<text class="name_label_detail text-label">{{detailAddress}}</text>
			</view>
			<view class="right-field">
				<image class="right-image" src="@/static/collect.png" @click="openNavigation"></image>
			</view>
		</view>
    </view>
</template>

<script>
	import {rpxToPx} from "@/common/util/util"
	export default {
		
	    data() {
	        return {
				titleZindex:100,
				NavBarColor:this.NavBarColor,
	            id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
				mapHeight:'500rpx',
				longitude:116.374999,
				latitude: 40.009704,
				placeName:'',
				detailAddress:'',
		  　　　marker: [],
			 //  {
			 //   　　id:0,
			 //   　　latitude: 40.009704,//纬度
			 //   　　longitude: 116.374999,//经度
			 //   　　iconPath: '/static/share.png',    //显示的图标        
			 //   　　rotate:0,   // 旋转度数
			 //   　　width:20,   //宽
			 //   　　height:20,   //高
			 //  　　 title:'你在哪了',//标注点名
			 //  　　 alpha:0.5,   //透明度
			 //  　　 /* label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				//   　　 content:'qqqqqq',//文本
				// 　　　 color:'red',//文本颜色
				// 	　 fontSize:24,//文字大小
				// 	   x:5,//label的坐标，原点是 marker 对应的经纬度
				// 	   y:1,//label的坐标，原点是 marker 对应的经纬度 
				// 	   borderWidth:12,//边框宽度
				// 	   borderColor:'pink',//边框颜色    
				// 	　 borderRadius:20,//边框圆角                        
				// 	　 bgColor:'black',//背景色
				// 	　 padding:5,//文本边缘留白
				// 	   textAlign:'right'//文本对齐方式。
			 //   }, */
			 //   callout:{//自定义标记点上方的气泡窗口 点击有效  
			 //   　　content:'qqqqq',//文本
			 //   　　color:'#ffffff',//文字颜色
			 //   　　fontSize:14,//文本大小
			 //   　　borderRadius:2,//边框圆角
			 //  　　 bgColor:'#00c16f',//背景颜色
			 //   　　display:'ALWAYS'//常显
			 //   }
			 //   // anchor:{//经纬度在标注图标的锚点，默认底边中点
			 //   //     x:0,    原点为给出的经纬度
			 //   //     y:0,
			 //   // }
						
		  //  }],
		   scale:16,//地图缩放程度
		   //已废弃
	   　 /* controls:[{//在地图上显示控件，控件不随着地图移动
		  　　id:1,//控件id
		  　　iconPath:'/static/blue.png',//显示的图标
		      clickable:true,
		  　　position:{//控件在地图的位置
			 　　left:15,
			 　　top:250,
			 　　width:100,
			 　　height:100
		 　　  },    
	   　　}], */ 
	  /* 　  circles:[{//在地图上显示圆
		  　　latitude: 40.009705,
		  　　longitude: 116.375999,
		  　　radius:50,//半径
			  fillColor:"red",//填充颜色
		  　　color:"#55aaffAA",//描边的颜色
		 　　 strokeWidth:1//描边的宽度
		  }], */ 
	   　/* 　polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
	   　　　　points:[
			  　　{latitude: 40.009153,longitude: 116.374935},
			 　　 {latitude: 40.009704,longitude: 116.374999},
	   　　　　],
	   　　　　color:"#0000AA",//线的颜色
	   　　　　width:2,//线的宽度
	   　　　　dottedLine:true,//是否虚线
	   　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
	   　　}], */
	     }
	    },
		onLoad() {
			// this.getLocation()
			console.log('maponload',this.$Route.query)
			this.longitude = parseFloat(this.$Route.query.longitude);
				
			this.latitude = parseFloat(this.$Route.query.latitude);
				
			this.placeName = this.$Route.query.placeName;
			this.detailAddress = this.$Route.query.detailAddress;
			// this.marker
			this.marker = [{
						   　　id:0,
						   　　latitude:this.latitude,//纬度
						   　　longitude: this.longitude,//经度
						   　　iconPath: '/static/resource/location.png',    //显示的图标        
						   　　rotate:0,   // 旋转度数
						   　　width:20,   //宽
						   　　height:20,   //高
						  　　 title:this.placeName,//标注点名
						  }
						  ]
						  console.log('makerrrrr',this.marker)
				
		},
		onReady(){
			const { windowHeight } = uni.getSystemInfoSync();
			console.log('mapppppppp',windowHeight)
			// let footerHeight = Math.ceil(rpxToPx(260));
			uni.createSelectorQuery().in(this).select('.footer_field').boundingClientRect((res)=>{
				console.log('jieshuo',res)
				let footerHeight = res.height;
				this.mapHeight = windowHeight - footerHeight +'px';
			}).exec();
			this._mapContext = uni.createMapContext("map", this);
			this.moveTo(this.latitude,this.longitude);
			
			
		},
	    methods: {
			getAuthorizeInfo(){
				//1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: "scope.userLocation",
					success() { //1.1 允许授权
						_this.getLocationInfoWx();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
						_this.openConfirm();
					}
				})
			},
			openConfirm(){
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res)=> {
						if (res.confirm) {
							uni.openSetting();// 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得位置信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			getCurrentLocation(){
				this.getLocation().then((res)=>{
					this.moveTo(res.latitude,res.longitude);
				},()=>{
					this.$tip.toast('获取位置失败')
				})
			},
			moveTo(latitude,longitude){
				this._mapContext.moveToLocation({
						latitude:latitude,//纬度
						longitude:longitude,
						success:(e)=>{
							console.log('success',e)
						},
						fail:(e)=>{
							console.log('fail',e)
						},
						complete:(e)=>{
							console.log('complete',e)
						},
				})
			},
			openNavigation(){
				// this._mapContext.openMapApp({
				// 	latitude:this.latitude,//纬度
				// 	longitude: this.longitude,
				// 	destination:this.placeName,
				// 	success:(e)=>{
				// 		console.log('success',e)
				// 	},
				// 	fail:(e)=>{
				// 		console.log('fail',e)
				// 	},
				// 	complete:(e)=>{
				// 		console.log('complete',e)
				// 	}
				// })
				const self = this;
				uni.showActionSheet({
				    itemList: ['腾讯'],
				    success: function (res) {
				        console.log('选中的索引：' + res.tapIndex,self.longitude,self.latitude);
				        if (res.tapIndex === 0) {
				            uni.openLocation({
				            		  longitude: self.longitude,
				                      latitude: self.latitude,          
				                      name: self.placeName,
										address: self.detailAddress,
										success: function (res) {
										console.log('打开系统位置地图成功')
				                    },
				                    fail: function (error) {
				                      console.log(error)
				                    },
				            		})
				        } else if (res.tapIndex === 1) {
				            // 用户选择了选项2
				        } else {
				            // 用户选择了选项3
				        }
				    },
				    fail: function (err) {
				        console.log('调用失败：' + err.errMsg);
				    }
				});
				

			},
			getLocation(){
				return new Promise((resolve,reject) => {
					uni.getLocation({
					    type: 'gcj02',
					    success: function (res) {
					        console.log('success当前位置的经度：' + res.longitude);
					        console.log('当前位置的纬度：' + res.latitude);
							resolve({
								longitude:parseFloat(res.longitude),
								latitude:parseFloat(res.res.latitude)
							})
					    },
						fail: function (res) {
							reject()
							 console.log('success当前位置的经度');
						}	
					});
				})
				
			}
	    }
	}
</script>

<style lang="scss" scoped>
	::v-deep .amap-logo {
	  opacity: 0 !important;
	}
	::v-deep .amap-copyright {
	  opacity: 0 !important;
	}
	.map-field{
		position: relative;
		.layer-control{
			position: absolute;
			bottom: 50rpx;
			left: 50rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	
	.left-icon{
		position: fixed;
		z-index:1;
	}
	.footer_field{
		min-height: 260rpx;
		display: flex;
		justify-content: space-between;
		
		padding:60rpx 30rpx;
		.name_lable-field{
			
			flex:1
		}
		.name_label{
			font-weight: $Semibold;
			font-size: 40rpx;
			line-height: 40rpx;
			color:#656668;
			margin-bottom: 30rpx;
			
		}
		.name_label_detail{
			font-size: 28rpx;
			color: #9A9A9A;
			line-height: 28rpx;
		}
		.text-label{
			 word-wrap: break-word;
			 // overflow: hidden;
			 // text-overflow: ellipsis;
			 // white-space: nowrap;
			 display: block;
		}
		.right-field{
			width: 160rpx;
			position: relative;
			.right-image{
				position: absolute;
				right: 0;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
